import { Suspense } from 'react' // 导入React库和Suspense组件
import { BrowserRouter, HashRouter, Route, Routes, Navigate } from 'react-router-dom' // 导入React Router相关组件
import routerList from './routerConfig' // 导入路由配置
import { RouterItem } from '@/router/type' // 导入路由项类型定义
import { Spin } from 'antd';

// 该组件根据routerList配置渲染对应的路由
function RouterView() {
	// 解构获取路由模式和路由数组
	const { mode, routes } = routerList;
	//   递归渲染路由数组中的每个路由项
	const rendeRoutes = (arr: RouterItem[]) => {
		return arr && arr.map((item, index) => {
			return (
				<Route key={index} path={item.path} element={item.to ?
					// 如果有to属性，使用Navigate组件进行重定向
					<Navigate to={item.to}></Navigate>
					:
					// 否则，使用路由项的element属性渲染对应的组件
					<item.element></item.element>}>
					{
						// 如果有子路由，递归调用rendeRoutes
						item.children && rendeRoutes(item.children)
					}
				</Route>
			)
		})
	}
	// 定义加载组件的样式
	const contentStyle: React.CSSProperties = {
		padding: 50,
		background: 'rgba(0, 0, 0, 0.05)',
		borderRadius: 4,
	};
	const content = <div style={contentStyle} />;
	return (
		// 使用Suspense处理路由组件异步加载状态 白屏优化
		<Suspense fallback={
			<Spin tip="加载中" size="large">
				{content}
			</Spin>}>
			{
				// 根据模式选择渲染BrowserRouter或HashRouter
				mode === "history" ?
					<BrowserRouter>
						<Routes>
							{
								rendeRoutes(routes) // 根据路由配置渲染路由
							}
						</Routes>
					</BrowserRouter>
					:
					<HashRouter>
						<Routes>
							{
								rendeRoutes(routes) // 根据路由配置渲染路由
							}
						</Routes>
					</HashRouter>
			}
		</Suspense>
	)
}
// 导出路由视图组件
export default RouterView
